<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>

<script src="vue.js"></script>
<link rel="stylesheet" href="animate.min.css">
<style type="text/css">
  .ball{
    width: 15px;
    height: 15px;
    border-radius:50%;
    background: red;
  }
  .wan{
    height: 50px;
    width: 70px;
    border-bottom-left-radius: 30%; 
    border-bottom-right-radius: 30%; 
    background: blue;
    position: absolute;
    top:300px;
    left:100px;
    }

</style>
</head>
<body>



<div id="app">
  <input type="button" value="小球动画" @click='flag=!flag'>

<transition 
      @before-enter="beforeEnter" 
      @enter="enter"
      @after-enter="afterEnter"
>
    <div class="ball" v-if="flag"></div>
</transition>

    <div class="wan"></div>

</div>


<br>

<script type="text/javascript">



var app = new Vue({
  el: '#app',

  data: {
  	flag:false,
  },

  methods:{//el为当前要执行的Dom元素，
           //可以认为el为 document.getElementById("")获取的元素
      beforeEnter(el){
        //动画入场之前，设置小球的位置
          el.style.transform = 'translate(0,0)'
      },
      enter(el,done){//动画之后的状态
        //这个语句没有实际效果，但是能够触发这个动画效果，width能够替换成top或者其他
        el.offsetWidth 
          el.style.transform = 'translate(120px,240px)'
          el.style.transition = 'all 2s ease'
          el.style.opacity = 0.8
          done()//当动画完成之后立即结束enter方法conf从而执行afterEnter方法时，可以调用第二个参数的这个方法，
          //当第二个参数存在但是没启用这个方法时，afterEnter就不会执行
      },

      afterEnter(el){
        // 动画完成之后会调用这个方法
        this.flag = false
      }
  	


  }

})





</script>

	
</body>
</html>